<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mail.139.com</title>
<style>
.tools{}
</style>
</head>

<body>
<h1>标签页(1)</h1>
<div class="tab">
	<ul class="tabTitle">
    	<li><i>图标</i><a href="#">标签一</a><span>关闭</span></li>
        <li><i>图标</i><a href="#">标签二</a><span>关闭</span></li>
        <li><i>图标</i><a href="#">标签三</a><span>关闭</span></li>
        <li><i>图标</i><a href="#">标签四</a><span>关闭</span></li>
    </ul>
    <div class="tabContent">
    	<div>任意的内容一，与标签一对应，这里的样式通过自己的class控制，tab类以最小影响为原则编写。</div>
        <div>任意的内容二，与标签二对应，这里的样式通过自己的class控制，tab类以最小影响为原则编写。</div>
        <div>任意的内容三，与标签三对应，这里的样式通过自己的class控制，tab类以最小影响为原则编写。</div>
        <div>任意的内容四，与标签四对应，这里的样式通过自己的class控制，tab类以最小影响为原则编写。</div>
    </div>
</div>

<h1>标签页(2)</h1>
<dl class="tab">
	<dt><i>图标</i><a href="#">标签一</a><span>关闭</span></dt>
    <dd>任意的内容一，与标签一对应，这里的样式通过自己的class控制，tab类以最小影响为原则编写。</dd>
    <dt><i>图标</i><a href="#">标签二</a><span>关闭</span></dt>
    <dd>任意的内容二，与标签二对应，这里的样式通过自己的class控制，tab类以最小影响为原则编写。</dd>
    <dt><i>图标</i><a href="#">标签三</a><span>关闭</span></dt>
    <dd>任意的内容三，与标签三对应，这里的样式通过自己的class控制，tab类以最小影响为原则编写。</dd>
    <dt><i>图标</i><a href="#">标签四</a><span>关闭</span></dt>
    <dd>任意的内容四，与标签四对应，这里的样式通过自己的class控制，tab类以最小影响为原则编写。</dd>
</dl>

<p>解释：以上是两种不同的标签实现的标签页表现方式</p>
</body>

</html>
